<template>
	<view class="content">
		<div class="post-list">
			<div class="post-list-i" v-for="item in postlist" :key="item._id" @click="goarticle(item,2)">
				<div class="post-list-l">
					<div class="post-list-title">{{item.title}}</div>
					<div class="post-list-info">
						<text>{{item.authorname}} 阅读量:{{item.readnum}}</text>
					</div>
				</div>
				<div class="post-list-r" v-if="item.pic">
					<image :src="item.pic" mode="aspectFill"></image>
				</div>
				
			</div>
		</div>
	</view>
</template>

<script>
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				postlist:[
					
				]
			}
		},
		methods: {
			goarticle(obj,a){
				obj.html=obj.html.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				getApp().globalData.nowarticle=obj
				
				wx.cloud.callFunction({
				  name: 'hserve',
				  data: {
					id:obj._id,
					name:'readarticle'
				  }
				}).then(res=>{
					console.log(res)
				})
				
				this.gopage('article/article')
				
			}
		},onLoad() {
			
			db.collection('article').get().then((res)=>{
				this.postlist=res.data
			})
		},onShow() {
			
		}
		
	}
</script>

<style lang="scss">
.content{
	font-size:26rpx;
	font-weight:400;
	color:rgba(51,51,51,1);
	background-color: rgb(236,242,254);
	min-height: 100vh;
}
.post-list-i{
	padding: 20rpx;
	background-color: #FFFFFF;
	display: flex;
	border-bottom: 1px solid #eee;
	.post-list-l{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.post-list-title{
			min-height: 60rpx;
			max-height: 87rpx;
			overflow: hidden;
			line-height: 43.5rpx;
			font-size: 32.64rpx;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			word-break: break-word;
		}
	}
	.post-list-r{
		width: 220rpx;
		height: 140rpx;
		margin-left: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}


</style>
